<template>
  <div class="playlist-deatil">
    <div class="pic">
      <van-icon name="arrow-left" @click="goBack" />
      <van-image :src="picUrl" alt="" fit="cover"></van-image>
    </div>
    <div v-if="songUrl==''" class="play">
     <div>
        <van-icon name="play-circle-o" @click="selectSong(firstItem)" />
      <span>播放全部</span>
     </div>
       <div>
    <van-icon name="like-o" />
    <span>收藏歌单</span>
    </div>
    </div>
   
    <div v-else>
<audio :src="songUrl" autoplay controls></audio>
    </div>
    <div class="song-list">
      <ul>
        <li v-for="item in songList" :key="item.songid" @click="selectSong(item)">
          <h4>{{ item.songname }}</h4>
          <p>{{ item.singer[0].name }}-{{ item.albumname }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      songList: [],
      picUrl: "",
      songUrl:"",
      firstItem:""
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios
        .get("/api/songlist", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.songList = res.data.data.songlist;
          this.picUrl = res.data.data.logo;
          this.firstItem=this.songList[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    selectSong(item){
      axios.get("/jsososo/song/urls",{
        params:{
id:item.songmid
        }
      })
      .then(res => {
        console.log(res.data.data[item.songmid])
        this.songUrl=res.data.data[item.songmid]
      })
      .catch(err => {
        console.error(err); 
      })
    }
  },
};
</script>
<style scoped>
.pic {
  height: 275px;
  width: 100%;
}
.van-image {
  height: 275px;
  width: 100%;
}
.van-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 40px;
}

.pic {
  position: relative;
}
.pic > .van-image {
  z-index: 100;
  width: 60%;
  height: 60%;
  margin-top: 30px;
}
.song-list {
  margin-bottom: 0.14rem;
  overflow: hidden;
  text-align: left;
margin-left: 5px;
}
.song-list>ul {
  margin-bottom: .14rem;
    overflow: hidden;
}
.song-list>li{
    text-align: -webkit-match-parent;
    padding: .1rem .07rem .1rem 0;
}
.song-list>ul>li>h4{
    font-size: 1.17em;
    font-weight: bold;
  display: inline;
  margin: 5px;
}
.song-list>ul>li>p{
  font-size: .12rem;
    color: rgba(0,0,0,.4);
  display: flex;
    
}
.play{
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.play>div:nth-of-type(2){
  float:right;
}
.play>div:nth-of-type(1){
  float:left;
}
.play>div:nth-of-type(2)>span{
display:block;
font-size: 12px;
overflow: hidden;

}
.van-icon-like-o{
  font-size: 20px;
  position: relative;
}
.van-icon-play-circle-o{
  position: relative;
  color:#31c27c;
  float: left;
}
.play>div:nth-of-type(1)>span{
height: 40px;
display: inline-block;
line-height: 40px;
margin-left: 10px;
}
</style>

